<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>微博登录</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
	</head>

	<body style="background-color: #F9F9FA;">

		<div class="row" style="background-color: #F9F9FA;">
			<div class="col-md-5 text-right">
				<img src="img/2019-10-18_222336.png" />
			</div>
			<div class="col-md-7 text-center">
				<div style="padding-top: 25px;">
					<a href="#">二维码登录</a>|
					<a href="#">注册</a>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="col-md-12 text-center">
					<h5>授权 网易云音乐 访问你的微博帐号 ，并同时登录微博</h5>
				</div>
			</div>
		</div>
		<form id="form1" name="form1" onsubmit="return checkform()" method="get" action="GeRenZhuYe.html">
			<table align="center" id="tab">
				<div class="row" style="margin-top: 30px;">
					<div class="col-md-5 text-right" style="padding-top: 6px;">账号：</div>

					<div class="col-md-7" style="width: 400px;">
						<input type="text" class="input-sm form-control" placeholder="请用微博账号登录" name="txtUsreName" id="txtUsreName" onblur="testUName()" />
						<div style="margin-top: 15px;color: red;"><span id="spUserName"></span></div>
					</div>
				</div>
				<div class="row" style="margin-top: 30px;">
					<div class="col-md-5 text-right" style="padding-top: 6px;">密码：</div>

					<div class="col-md-7" style="width: 400px;">
						<input type="password" class="input-sm form-control" placeholder="请输入密码" name="txtPwd" id="txtPwd" onblur="testPwd()"/>
						<div style="margin-top: 15px;color: red;"><span id="spPwd"></span></div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12 text-center" style="padding-top: 30px; ">
						<input type="submit" name="btnsubmit" id="btnsubmit" value="登录" style="width: 100px; background-color: deepskyblue; color: white;" />
					</div>
				</div>
			</table>
		</form>
		<div class="row" style="padding-top: 10px;">
			<div class="col-md-12 text-center">
				<p>提示：为保障帐号安全，请认准本页URL地址必须以 api.weibo.com 开头</p>
			</div>
		</div>
		<div class="container">
			<div class="row" style="padding-top: 30px;">
				<div class="col-md-12">
					<div class="text-center">
						<a href="index.html">其他登录方式</a>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			function testUName() {
				var uname = document.getElementById("txtUsreName").value;
				var sp = document.getElementById("spUserName");
				var reg = /^[A-Za-z0-9_\-\u4e00-\u9fa5]{3,6}$/;
				if(reg.test(uname)) {
					sp.innerHTML = "";
					return true;
				} else {
					sp.innerHTML = "用户名必须是3到6个字符";
					return false;
				}
			}

			function testPwd() {
				var pwd = document.getElementById("txtPwd").value;
				var sp = document.getElementById("spPwd");
				var reg = /^[A-Za-z0-9_-]{6,}$/;
				if(reg.test(pwd)) {
					sp.innerHTML = "";
					return true;
				} else {
					sp.innerHTML = "密码必须是六个字符以上";
					return false;
				}
			}

			function checkform() {
				if(testUName() && testPwd()) {
					alert("通过验证，可以提交")
					return true;
					
				} else {
					alert("验证有误，请审核完毕再提交")
					return false;
				}
			}
		</script>

	</body>

</html>